﻿@page "/DatePicker/Month-Picker"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
   <p>The following sample demonstrates the DatePicker component acting as a month picker. It allows you to select values in terms of months.</p>
</SampleDescription>
<ActionDescription>
    <p>DatePicker has the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Start' target='_blank'> Start</a> and the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Depth' target='_blank'> Depth</a> properties that provide options to restrict users from navigating to any Calendar view (year, month, or decade).</p>
    <p>More information on the DatePicker Start/Depth can be found in the <a href='https://blazor.syncfusion.com/documentation/datepicker/view/#start-and-depth-view' target='_blank'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div id="wrapper" class="datepicker-section">
        <div id="datepicker-control">
            <SfDatePicker TValue="DateTime?" Value="@DateValue" Placeholder="Choose a date" Format="MMMM yyyy" Start="CalendarView.Year" Depth="CalendarView.Year"></SfDatePicker>
        </div>
    </div>
</div>

@code {
    public DateTime DateValue { get; set; } = DateTime.Now;
}

<style>
    #wrapper {
        max-width: 250px;
        margin: 0px auto;
        padding-top: 70px;
    }
</style>
